<template>
  <div style="width:100%;height:100%;">
    <div class="userMsg">
      <h3 style="font-size:18px;color:#212121;font-weight:500;margin:0 0;padding:15px 0;">{{tagMsg.title}}</h3>
      <div style="color:#999;line-height:25px;">
        <el-link type="info" :underline="false" icon="fa fa-eye" style="padding:0 5px;">浏览量({{tagMsg.view}})</el-link>
        <el-link type="info" :underline="false" icon="fa fa-clock-o" style="padding:0 5px;">发布时间: {{tagMsg.ctime}}</el-link>
      </div>
      <div style="position:absolute;width:380px;height:calc(100% - 20px);padding:10px;top:0px;right:0px;">
        <el-avatar :size="50" :src="tagMsg.avatar"></el-avatar>
        <el-link :underline="false" style="vertical-align:top;line-height:50px;font-size:18px;" @click="toUserMsg(tagMsg.objid)">{{tagMsg.nickname}}
        </el-link>
      </div>
    </div>
    <div style="height:800px;border:1px solid #e7e7e7;width:calc(100% - 2px);position:relative;">
      <div style="position:absolute;top:0;left:0;height:100%;width:249px;border-right:1px solid #e7e7e7;overflow-y:auto;">
        <p>总计标注：{{taggingData.length}}个</p>
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="search" @keyup.enter.native="queryTitle">
        </el-input>
        <div v-for="(item,key) in canFilterTaggiingData" :key="item.objid" style="padding:8px 10px;" @mouseover="highLight(item.objid)"
          @mouseout="cancelHighLight" @click="showDetail(item.objid)" :class="{ChoosedItem:item.objid==tempMoveTag}">
          <span style="cursor: pointer;">{{item.title}}</span>
        </div>
        <p v-if="!canFilterTaggiingData.length">无对应标注~</p>
      </div>
      <div style="position:absolute;top:0;left:250px;height:100%;width:calc(100% - 580px)" @mousewheel="cancalDefaultWheel">
        <canvas id="mainCanvas"></canvas>
      </div>
      <div style="position:absolute;width:320px;height:calc(100% - 21px);border-left:1px solid #e7e7e7;;padding:5px;top:0px;right:0px;overflow-y:auto;">
        <p style="padding:0 0;margin:0 0;" v-if="tempMoveTag">标注详情：</p>
        <div style="padding:10px 5px;" v-if="tempMoveTag">
          <p style="white-space: pre-wrap;"><span style="color:#aaa;">标题：</span>{{detailData.title || "暂无~"}}</p>
          <p style="white-space: pre-wrap;"><span style="color:#aaa;">中文医药注释：</span>{{detailData.zhcn || "暂无~"}}</p>
          <p style="white-space: pre-wrap;"><span style="color:#aaa;">藏语医药注释：</span>{{detailData.zy || "暂无~"}}</p>
        </div>
        <p v-if="!tempMoveTag">请在左侧列表或图中选中标注进行查看~</p>
      </div>
    </div>
    <div class="fc">
      <el-link type="info" :underline="false" icon="fa fa-heart" style="padding:0 5px;font-size:18px;" :class="{hasFav:tagMsg.hasFav}"
        @click="fav(1)">赞({{tagMsg.fav}})</el-link>
      <el-link type="info" :underline="false" icon="fa fa-comments-o" style="padding:0 5px;font-size:18px;">评论({{tagMsg.comments}})</el-link>
    </div>
    <div class="introduce">
      <p style="white-space:pre-wrap;padding:0 0;margin:0 0;">简介：{{tagMsg.introduce || "暂无简介~"}}</p>
    </div>
    <div class="comments">
      <div class="user-self">
        <div v-if="userLegal" style="padding:15px 10px 15px 0;">
          <div style="position:relative;">
            <el-avatar :size="50" :src="userMsg.avatar"></el-avatar>
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。" v-model="tempComment"
              style="position:absolute:top:0px;right:120px;left:20px;width:calc(100% - 180px);vertical-align:top;">
            </el-input>
            <el-button type="primary" style="position:absolute;top:5px;right:0px;" @click="publishComment">发表评论</el-button>
          </div>
        </div>
        <div v-else>
          <el-button type="primary" style="width:100%;" @click="toLogin">请在登录后评论</el-button>
        </div>
      </div>
    </div>
    <div class="comments" v-infinite-scroll="getTagCommentList" infinite-scroll-delay="200">
      <div class="comment-item" v-for="item in comments" :key="item.objid">
        <div class="comment-lvl1">
          <el-avatar :size="50" :src="item.avatar" class="comment-avatar"></el-avatar>
          <div style="margin-left:60px;">
            <el-link type="info" :underline="false" class="comment-author" @click="toUserMsg(item.userid)">{{item.nickname}}</el-link>
            <p class="comment-content">{{item.content}}</p>
            <div style="font-size:14px;">
              <span>{{item.ctime}}</span>
              <el-link v-if="userLegal && item.userid != userMsg.objid" @click="showReplyDiv(item)" type="primary" :underline="false"
                style="vertical-align:top;">回复</el-link>
              <el-button v-if="userLegal && item.userid == userMsg.objid" @click="deleteComment(item)" size="mini" style="vertical-align:middle;"
                icon="el-icon-delete" circle type="danger"></el-button>
            </div>
          </div>
        </div>
        <div class="comment-lvl2" v-show="item.count != 0">
          <div v-for="lv2 in item.lvl2" :key="lv2.objid" class="comment-lvl2-item">
            <el-avatar :size="40" :src="lv2.avatar" class="comment-avatar"></el-avatar>
            <el-link type="info" :underline="false" class="comment-author" style="padding:0 5px;vertical-align:top;" @click="toUserMsg(lv2.userid)">
              {{lv2.nickname}}</el-link>
            <span style="vertical-align:top;"> 回复@</span>
            <el-link type="info" :underline="false" class="comment-author" style="padding:0 5px;vertical-align:top;"
              @click="toUserMsg(lv2.becommentuserid)">{{lv2.benickname}}</el-link>
            <p class="comment-content" style="margin-left:50px;">{{lv2.content}}</p>
            <div style="font-size:14px;margin-left:50px;">
              <span style="verticle-align:middle;">{{lv2.ctime}}</span>
              <el-link v-if="userLegal && lv2.userid != userMsg.objid" @click="showReplyDiv(item)" type="primary" :underline="false"
                style="verticle-align:middle;">回复</el-link>
              <el-button v-if="userLegal && lv2.userid == userMsg.objid" @click="deleteComment(lv2)" size="mini" style="vertical-align:middle;"
                icon="el-icon-delete" circle type="danger"></el-button>
            </div>
          </div>
        </div>
        <div class="reply" v-if="item.reply">
          <el-avatar :size="40" :src="userMsg.avatar"></el-avatar>
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" :placeholder="`回复 @${item.bereply}:`" v-model="item.replymsg"
            style="position:absolute:top:0px;right:120px;left:20px;width:calc(100% - 180px);vertical-align:top;">
          </el-input>
          <el-button type="primary" style="position:absolute;top:5px;right:10px;" @click="replyComment(item)">回复</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import view from "@/utils/graph/view"
import { mapGetters } from "vuex"
import { getTaggingMsgByObjid, addTagView, getExpertMsgByTagId } from "@/api/front/tag"
import { publishLvl1TagComment, getCommentList, deleteTagComment, replyTagComment } from "@/api/front/comment"
import { cancalTagFav, addTagFav, hasFavTag, getFavListByTag } from "@/api/front/fav"
export default {
  data() {
    return {
      view: null,
      taggingData: [],
      canFilterTaggiingData:[],
      showDataDetail: false,
      detailData: {},
      tagMsg: {
        hasFav: false,
        favid: "",
        avatar: "",
        nickname: "",
        objid: "",
        title: "",
        introduce: "",
        view: 0,
        ctime: "",
        fav: 0,
        comments: 0
      },
      comments: [],
      tempComment: "",
      page: 1,
      loading: false,
      nomore: false,
      showReply: false,
      favList: [],
      tempMoveTag: "",
      search:""
    }
  },
  computed: {
    ...mapGetters({
      userMsg: 'user/getUserMsg',
      userType: 'user/getUserType',
      userLegal: 'user/getUserIsLegal'
    })
  },
  created() {
    //获取标注数据
    getTaggingMsgByObjid({ objid: this.$route.query.objid }, (res) => {
      if (res.code == 200) {
        Object.keys(res.data.taggingData).forEach((key) => {
          res.data.taggingData[key].map((item) => {
            item.points = JSON.parse(item.points)
            this.taggingData.push(item)
          })
        })
        this.taggingData.sort((a, b) => {
          return a.createdT < b.createdT;
        })
        this.queryTitle()
      }
    })
    //新增访问量
    addTagView({ objid: this.$route.query.objid }, (res) => {

    })
    //获取标注者信息
    getExpertMsgByTagId({ objid: this.$route.query.objid }, (res) => {
      if (res.code == 200) {
        Object.assign(this.tagMsg, res.data)
      }
    })
    //是否点赞标注
    hasFavTag({ tagid: this.$route.query.objid }, (res) => {
      if (res.code == 200) {
        this.tagMsg.hasFav = true
        this.tagMsg.favid = res.data
      }
    })
    //获取赞列表
    getFavListByTag({ tagid: this.$route.query.objid }, (res) => {

    })
  },
  mounted() {
    this.view = new view("mainCanvas", this.$route.query.objid, { showType: true })
    this.view.setMouseMoveFunction(this.mouseMoveEvent)
  },
  methods: {
    backToMain() {
      this.$router.go(-1)
    },
    //高亮显示
    highLight(id) {
      this.view.showHighLight(id)
    },
    //取消高亮
    cancelHighLight() {
      this.view.cancelHighLight()
    },
    //显示详细信息
    showDetail(id) {
      this.detailData = {}
      this.taggingData.map((item) => {
        if (item.objid == id) {
          this.detailData = item
        }
      })
      this.tempMoveTag = id
    },
    //取消默认事件
    cancalDefaultWheel(e) {
      e.preventDefault();
    },
    //去登录
    toLogin() {
      this.$router.push({
        path: '/user/login',
        query: { beforePath: this.$route.fullPath }
      })
    },
    //发表评论
    publishComment() {
      if (this.tempComment) {
        publishLvl1TagComment({ objid: this.$route.query.objid, content: this.tempComment }, (res) => {
          if (res.code == 200) {
            this.tempComment = ""
            this.comments.unshift(res.data)
            this.uniqueComment()
          }
        }, true)
      }
      else {
        this.$message("请填写内容")
      }
    },
    //评论去重
    uniqueComment() {
      let objids = this.comments.map((item) => {
        return item.objid
      })
      this.comments = this.comments.filter((item, index) => {
        return objids.indexOf(item.objid) == index;
      })
    },
    //获取评论
    getTagCommentList() {
      if (!this.nomore && !this.loading) {
        this.loading = true
        getCommentList({ objid: this.$route.query.objid, page: this.page }, (res) => {
          if (res.code == 200) {
            if (res.data.length) {
              this.comments.push(...res.data)
              this.uniqueComment()
              this.page++
            }
            else {
              this.nomore = true
            }
          }
        })
        this.loading = false
      }
    },
    //删除评论
    deleteComment(item) {
      this.$confirm('确定删除该评论吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTagComment({ objid: item.objid }, (res) => {
          if (res.code == 200) {
            this.tagMsg.comments--
            if (item.type == 1) {
              this.comments = this.comments.filter(it => it.objid != item.objid)
            }
            else {
              this.comments.map((origin) => {
                if (origin.objid == item.originid) {
                  origin.lvl2 = origin.lvl2.filter(it => it.objid != item.objid);
                }
              })
            }
          }
        }, true)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //回复评论
    replyComment(item) {
      let param = {}
      this.comments.map((it) => {
        if ((item.type == 1 && it.objid == item.objid) || (item.type == 2 && item.objid == it.originid)) {
          param.objid = it.replyobjid
          param.content = it.replymsg
          param.tagid = it.tagid
        }
      })
      replyTagComment(param, (res) => {
        if (res.code == 200) {
          this.tagMsg.comments++
          this.comments = this.comments.map((it) => {
            if (it.objid == res.data.originid) {
              it.count++
              it.lvl2.unshift(res.data)
              it.reply = !it.reply
              if (it.replymsg) {
                it.replymsg = ""
              }
            }
            return it;
          })
        }
      }, true)
    },
    //显示回复div
    showReplyDiv(item) {
      this.comments = this.comments.map((it) => {
        if ((item.type == 1 && it.objid == item.objid) || (item.type == 2 && item.objid == it.originid)) {
          if (it.replymsg) {
            it.replymsg = ""
          }
          it.reply = !it.reply
          it.bereply = it.nickname
          it.replyobjid = item.objid
        }
        return it
      })
    },
    //点赞
    fav(type, objid) {
      if (type == 1) {
        if (this.tagMsg.hasFav) {
          cancalTagFav({ favid: this.tagMsg.favid }, (res) => {
            if (res.code == 200) {
              this.tagMsg.hasFav = !this.tagMsg.hasFav
              this.tagMsg.fav--
            }
          }, true)
        }
        else {
          addTagFav({ tagid: this.$route.query.objid }, (res) => {
            if (res.code == 200) {
              this.tagMsg.hasFav = !this.tagMsg.hasFav
              this.tagMsg.favid = res.data.objid
              this.tagMsg.fav++
            }
          }, true)
        }
      }
    },
    //去个人信息
    toUserMsg(objid) {
      this.$router.push({
        path: "/uIndex/userMsg",
        query: { objid: objid }
      })
    },
    //鼠标移动事件
    mouseMoveEvent(item) {
      if (item != this.tempMoveTag) {
        this.tempMoveTag = item;
        this.highLight(item)
        this.showDetail(item)
      }
    },
    queryTitle(){
      this.canFilterTaggiingData = []
      this.taggingData.map((item) => {
        if((item.title && item.title.indexOf(this.search) != -1) || this.search == ""){
          this.canFilterTaggiingData.push(item)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.userMsg {
  position: relative;
  top: 0px;
  left: 0px;
  width: calc(100% - 2px);
}
.fc,
.introduce {
  padding: 15px 0;
  border-bottom: 1px solid #e7e7e7;
}
/deep/ .userMsg a {
  vertical-align: top;
}
.comment-item {
  padding: 5px 0;
  border-top: 1px solid #e7e7e7;
}
.comment-lvl1::before {
  content: "";
  display: block;
  clear: both;
}
.comment-lvl1::after {
  content: "";
  display: block;
  clear: both;
}
.comment-lvl2-item::before,
.comment-lvl2-item::after {
  content: "";
  display: block;
  clear: both;
}
.comment-lvl2-item {
  margin-left: 60px;
  padding: 5px 0;
}
.comment-avatar {
  float: left;
}
.comment-author {
  color: #6d757a;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
}
.comment-content {
  margin: 0 0;
  padding: 8px 10px 5px 0px;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
}
.reply {
  margin: 10px 0 0 60px;
  position: relative;
}
.hasFav {
  color: #409eff;
}
.ChoosedItem {
  background: #eee;
}
</style>